<template>
    <main-wrap style="background-color: #fff;">
        <div class="home">
            <div class="homeTop">
                <div class="topBox">
                    <div class="avatar"><Image :url="cDetail.avatar"/></div>
                    <div class="ms">
                        <h4>{{cDetail.remark}}<div class="bmtxt">微信昵称：{{cDetail.name}}</div></h4> 
                    </div>
                </div>
            </div>
            <div class="homeMain">
                <div>
                    <van-field v-model="formData.remark" is-link readonly label="备注" placeholder="设置备注" @click="setRemark"/>
                    <van-field v-model="formData.remark_mobiles" is-link readonly label="电话" placeholder="设置电话" @click="setRemark"/>
                    <van-field v-model="formData.remark_corp_name" is-link readonly label="企业" placeholder="设置企业" @click="setRemark"/>
                    <van-field v-model="formData.description" is-link readonly label="描述" placeholder="设置描述" @click="setRemark"/>
                    <van-field v-model="formData.tagsStr" is-link readonly label="标签" placeholder="设置标签" @click="setTag"/>
                    <van-field v-model="formData.follow_name"  readonly label="添加人"/>
                    <van-field v-model="formData.follow_createTime"  readonly label="添加时间"/>
                    <van-field v-model="formData.from"  readonly label="来源"/>
                </div>
                <div class="fitembox">
                    <van-button type="primary" round color="#e3af2f" block @click="openEnterpriseChat(userStore.userInfo.userid,external_userid)">发消息</van-button>
                </div>
            </div>
        </div>
        <!-- <template v-slot:footer>
            <footer-nav/>
        </template> -->
    </main-wrap>
</template>
<script setup>
import { ref,onMounted,nextTick } from "vue";
import {useRouter} from 'vue-router'
import {getCustomList} from '@/api/qy-wechat-api'
import { useUserStore } from '@/stores/modules/user'
import {timestampFormat,addWayFormat} from '@/utils/convert'
import mainWrap from '@/components/mainWrap.vue'
import wechat from '@/utils/wechat'
import {openEnterpriseChat} from '@/utils/wechat'

const router = useRouter()
const userStore = useUserStore()

const external_userid = ref('') // 外部联系人id(客户id)
const member_userid = ref('') // 内部成员id
const cDetail = ref({}) //客户详情
const formData = ref({})

onMounted(async ()=>{
    const {currentRoute} = router
    external_userid.value = currentRoute.value.query.cuid
    member_userid.value = currentRoute.value.query.muid // userStore.userInfo.userid

    const configInfo = await wechat.config()  // 配置
    await nextTick()
    wx.ready(async()=>{
        //alert('开始agentConfig')
        await wechat.agentConfig(['openEnterpriseChat'],configInfo.nonceStr,configInfo.timestamp) 
    });
    

    getCustomList({
        pageSize:10,
        pageIndex:1,
        external_userid:external_userid.value,
        'follow_info.userid':member_userid.value
    }).then(res =>{
        cDetail.value = res.data.data[0]
        // 赋值
        const dt = res.data.data[0]
        formData.value.remark =  dt.remark || dt.name
        formData.value.remark_mobiles = dt.remark_mobiles?dt.remark_mobiles.join(','):'' // 备注电话
        formData.value.remark_corp_name = dt.remark_corp_name // 备注企业
        formData.value.description = dt.description // 备注描述
        formData.value.follow_name = dt.follow_info.name // 添加人
        formData.value.follow_createTime = timestampFormat(dt.follow_createTime) // 
        formData.value.from = dt.state + addWayFormat(dt.add_way)
        let tagsStr = []
        dt.tags.forEach(item => {
            tagsStr.push(item.tag_name)
        });
        formData.value.tagsStr = tagsStr.join(',')
    })
})

const setRemark = ()=>{
    router.push({name:'RemarkSet',query:{cuid:external_userid.value,muid:member_userid.value}})
}
const setTag=()=>{
    router.push({name:'TagAdd',query:{cuid:external_userid.value,muid:member_userid.value}})
}
</script>

<style lang="scss" scoped>
.home{
    background: url('/images/cbg.png') left top no-repeat;
    background-size: 100% auto;
    background-color: #fff;
    .homeTop{
        font-size: 26px;
        padding: 30px 30px 0 30px;
        .topBox{
            height: 110px;
            display: flex;
            .avatar{
                width: 110px;
                height: 110px;
                border-radius:50% ;
                background: #fde685;
                overflow: hidden;
            }
            .ms{
                flex: 1;
                display: flex;
                padding: 0 0 0 20px;
                h4{
                    flex: 1;
                    padding: 10px 0 0 10px;
                    line-height: 50px;
                    color: #fff;
                    font-size: 30px;
                    font-weight: 500;
                    .bmtxt{
                        font-size: 26px;
                        color: #fff;
                    }
                    img{
                        width: 35px;
                        margin: 0 0 0 5px;
                    }
                }
                p{
                    display: flex;
                    height: 40px;
                    color: #999999;
                    align-items: center;
                    margin: 25px 0 0 0;
                    img{
                        width: 55px;
                    }
                }
            }
            .opBtnBox{
                display: flex;
                justify-content: center;
                align-items: center; 
                padding: 0 10px 0 0;
                .editBtn{
                    display: inline-block;
                    height: 52px;
                    line-height: 50px;
                    text-align: center;
                    border: 1px solid #ffffff;
                    border-radius:26px ;
                    color: #ffffff;
                    font-size: 26px;
                    margin: 0;
                    padding: 0 20px;
                    &+.editBtn{
                        margin-left: 20px;
                    }
                }
            }
            
        }
    }
    .homeMain{
        margin: 30px 0 0 0;
        background:url('/images/cbg2.png') left top no-repeat;
        background-size: 100% auto;
        width: 100%;
        padding: 30px 0 30px 0;
        font-size: 30px;
       .fitembox{
           // background: #f8f8f8;
           padding: 20px;
       }
    }
} 

</style>
<style lang="scss">
.homeMain {
    .van-cell{
        background:none;
       // border-bottom: 1px solid #eee;

    }
}
</style>